<template>
	<view>
		<view class="model-border" style="display: flex;align-items: center;">
			<view class="title"></view>
			<text class="icon-title">信息录入</text>
		</view>
		<view class="content">
			<view class="content_text">社区</view>
			<u-input class="content-input" v-model="form.community" :clearable="false" placeholder="请输入社区名称" disabled
				@click="showSelect = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">
				<text>小区名字</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.FRDH" :clearable="false" placeholder="请输入小区名字" type="number" />
		</view>
		<view class="content">
			<view class="content_text">
				<text>户主</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.FRDH" :clearable="false" placeholder="请输入户主" type="number" />
		</view>
		<view class="content">
			<view class="content_text">
				<text>编号</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.FRDH" :clearable="false" placeholder="请输入编号" type="number" />
		</view>
		<view class="content">
			<view class="content_text">户别</view>
			<u-input class="content-input" v-model="form.holds" :clearable="false" placeholder="请输入户别" type="number"
				disabled @click="showHolds = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">
				<text>地址</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.FRDH" :clearable="false" placeholder="请输入地址" type="number" />
		</view>
		<view class="content">
			<view class="content_text">
				<text>单元</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.FRDH" :clearable="false" placeholder="请输入单元" type="number" />
		</view>
		<view class="content">
			<view class="content_text">
				<text>楼栋</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.FRDH" :clearable="false" placeholder="请输入楼栋" type="number" />
		</view>
		<view class="content">
			<view class="content_text">
				<text>楼层</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.FRDH" :clearable="false" placeholder="请输入楼层" type="number" />
		</view>
		<view class="content">
			<view class="content_text">
				<text>入住时间</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.time" :clearable="false" placeholder="请输入入住时间" type="number"
				disabled @click="show = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="open_invoice" @click="submit">
			<text>提交</text>
		</view>
		<u-picker mode="time" v-model="show" @confirm="selectTime"></u-picker>
		<u-select v-model="showSelect" :list="list" @confirm="selectCommunity"></u-select>
		<u-select v-model="showHolds" :list="listHolds" @confirm="selectHolds"></u-select>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showSelect: false,
				showHolds: false,
				form: {
					time: '',
					community: '',
					holds: ''
				},
				list: [{
						value: '1',
						label: '金鹭小区'
					},
					{
						value: '2',
						label: '金贵小区'
					}
				],
				listHolds: [{
						value: '1',
						label: '家庭户'
					},
					{
						value: '2',
						label: '集体户'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			selectTime(e) {
				this.form.time = e.year + '-' + e.month + '-' + e.day
				console.log(e)
			},
			selectCommunity(e) {
				this.form.community = e[0].label
			},
			selectHolds(e) {
				this.form.holds = e[0].label
			},
			submit() {
				if (!this.form.time) {
					this.$refs.uTips.show({
						title: '请选择时间',
						type: 'error',
						duration: '2000'
					})
				}
			},
		}
	}
</script>

<style scoped>
	.title {
		height: 40rpx;
		width: 10rpx;
		background-color: #68B92E;
		margin: 20rpx 0 20rpx 20rpx;
	}

	.icon-title {
		display: block;
		line-height: 100rpx;
		padding-left: 10rpx;
		font-weight: bold;
	}

	.content {
		width: 95%;
		height: 80rpx;
		margin: 0 auto;
		background-color: #F7F7F7;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.content_text {
		font-size: 26rpx;
		letter-spacing: 2rpx;
		margin-left: 30rpx;
		width: 200rpx;
	}

	.right {
		width: 50rpx;
	}

	.right image {
		width: 30rpx;
		height: 30rpx;
	}

	>>>.u-input {
		border: none !important;
	}

	.content-input {
		flex: 1 !important;
	}

	.open_invoice {
		width: 400rpx;
		height: 90rpx;
		background-color: #68B92E;
		text-align: center;
		border-radius: 15rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.open_invoice text {
		font-size: 25rpx;
		font-family: Source Han Serif CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 20rpx;
		display: block;
	}
</style>
